<template>
  <div>
    <van-nav-bar
      title="食物健康测评"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs v-model="active">
      <van-tab :title="'建议少吃 '+sum.num1">
        <h4 class="h41">以下食物升糖指数爆炸，绝对建议少吃</h4>
        <van-row class="divrow">
          <van-col
            class="divcol"
            span="24"
            v-for="(item, index) in $store.state.stdata"
            :key="index"
            v-show="item.category_id == 1"
          >
            <div class="divtou">
              <div class="divtitle">
                <img :src="item.imgUrl" alt="" />
                <span>{{ item.name }}</span>
              </div>
              <span>升糖指数：{{ item.glycemicIndex }}</span>
            </div>
            <p>{{ item.content }}</p>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab :title="'适量食用 '+sum.num2">
        <h4 class="h42">以下食物升糖指数适中，建议适量食用</h4>
        <van-row class="divrow">
          <van-col
            class="divcol"
            span="24"
            v-for="(item, index) in $store.state.stdata"
            :key="index"
            v-show="item.category_id == 2"
          >
            <div class="divtou">
              <div class="divtitle">
                <img :src="item.imgUrl" alt="" />
                <span>{{ item.name }}</span>
              </div>
              <span>升糖指数：{{ item.glycemicIndex }}</span>
            </div>
            <p>{{ item.content }}</p>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab :title="'放心食用 '+sum.num3">
        <h4 class="h43">以下食物升糖指数偏低，可以放心食用</h4>
        <van-row class="divrow">
          <van-col
            class="divcol"
            span="24"
            v-for="(item, index) in $store.state.stdata"
            :key="index"
            v-show="item.category_id == 3"
          >
            <div class="divtou">
              <div class="divtitle">
                <img :src="item.imgUrl" alt="" />
                <span>{{ item.name }}</span>
              </div>
              <span>升糖指数：{{ item.glycemicIndex }}</span>
            </div>
            <p>{{ item.content }}</p>
          </van-col>
        </van-row>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  computed: {
    sum() {
      let bothsum = { 
                    num1: 0, 
                    num2: 0,
                    num3: 0
                     };
      this.$store.state.stdata.forEach((item, index) => {
        if (item.category_id == 1) {
          allsum.num1++;
        } else if (item.category_id == 2) {
          allsum.num2++;
        } else if (item.category_id == 3) {
          bothsum.num3++;
        }
      });
      return allsum;
    },
  },
};
</script>

<style lang="scss">
h4 {
  text-align: center;
}
.h41 {
  color: rgb(240, 65, 65);
}
.h42 {
  color: rgb(182, 185, 0);
}
.h43 {
  color: rgb(24, 196, 2);
}
.divrow {
  box-sizing: border-box;
  padding: 10px;
  .divcol {
    background: rgb(243, 243, 243);
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 10px;
    p {
      font-size: 14px;
      margin-top: 10px;
    }
    .divtou {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-weight: bold;
      }
      .divtitle {
        display: flex;
        align-items: center;
        span {
          margin-left: 5px;
        }
      }
      img {
        width: 40px;
        height: 30px;
        border-radius: 10px;
      }
    }
  }
}
</style>
